'use client'

import { yupResolver } from '@hookform/resolvers/yup'
// import { LoginBtn } from '@/components/common/Buttons'
import TextField from '@/components/TextField/index'
import Headline from '@/components/Headline/index'
import { useEffect } from 'react'
import { useForm } from 'react-hook-form'
import { logInSchema } from '@/lib/parity'
import Image from "next/image";
import Imgs from '@/lib/imgs'
import styles from './index.module.scss';
import classNames from 'classnames'
import JButton from '@/components/JButton/index'


interface IProps {
  isLoading: boolean;
  // onSubmit: () => void
}
// onSubmit

const errors = { message: 'Please provide a vaild email address' }

const LoginForm = ({ isLoading, }: IProps) => {
  const {
    handleSubmit,
    control,
    formState: { errors: formErrors },
    setFocus,
  } = useForm({
    resolver: yupResolver(logInSchema),
    defaultValues: { email: '', password: '' },
  })

  useEffect(() => {
    setFocus('email')
  }, [])

  return (
    // onSubmit={handleSubmit(onSubmit)}
    <form autoComplete="off" className={classNames(styles.login_form, '!w-[311px]')}>
      <Headline title='Create account' />
      <TextField
        label="Email"
        // placeholder="请输入您的账户邮箱"
        name="email"
        control={control}
        errors="Please provide a vaild email address"
      />

      <TextField
        label="Password"
        errors="Please provide a vaild email address"
        type="password"
        // placeholder="请输入您的账户密码"
        name="password"
        control={control}
      />

      <div className={styles.login_form__agree}>
        <Image src={Imgs.checked} width="18" height="18" alt='checked' />
        <div className={styles.login_form__agree_val}>
          I agree to the Terms of Service and Privacy Policy
          <span className="main-color">《Terms of Service》</span>
          <span className="main-color">《Privacy Policy》</span>
        </div>
      </div>
      {/* <LoginBtn isLoading={isLoading}>登录</LoginBtn> */}
      <JButton type='gradient' className='register_page-submit' nativeType='submit' onClick={() => {}}>
        登录
      </JButton>

    </form>
  )
}

export default LoginForm
